<template>
  <div class="home-recommend">
    <h2>推荐歌单</h2>
    <ul>
      <HomeListCard v-for="item in personalized" :key="item.id" :item="item" />
    </ul>
    <h2>最新歌曲</h2>
    <ul>
      <SongListItem v-for="item in newsong" :key="item.id" :item="item" />
    </ul>
  </div>
</template>

<script>
import HomeListCard from "../components/HomeListCard";
import SongListItem from "../components/SongListItem";
export default {
  components: {
    HomeListCard,
    SongListItem,
  },
  data: function () {
    return {
      personalized: [],
      newsong: [],
    };
  },
  created: function () {
    this.axios.get("/personalized?limit=6").then((res) => {
    //   console.log(res.data.result);
      this.personalized = res.data.result
    });

    this.axios.get("/personalized/newsong").then((res) => {
    //   console.log(res.data.result);
      this.newsong = res.data.result

    });
  },
  activated: function () {
    console.log("recommend activated");
  },
  deactivated: function () {
    console.log("recommend deactivated");
  },
};
</script>

<style>
</style>